<template>
    <!-- 消费记录 -->
    <scroll-view class="page-consumption-record container" scroll-y scroll-with-animation>
        <view class="record">
            <view class="month">消费总额 </view>
            <view class="money">金额：￥200.00 </view>
        </view>
        <view class="each-record">
            <view class="line" v-for="(item, index) in recordList" :key="index">
                <u-icon class="photo" name="rmb-circle-fill" color="#2979ff" size="60"></u-icon>
                <view class="right-content">
                    <view class="top">
                        <view>100L</view>
                        <view>-200.00</view>
                    </view>
                    <view class="times">2021-07-01 16:14</view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script>

export default {
    name: "consumptionRecord",
    components: {
        // 组件
    },
    props: {
        // 组件接收的数据
    },
    data() {
        // 数据
        return {
            //消费记录列
            recordList: [
                {
                    title: "充值水卡",
                    lable: "2021-07-01  16:14",
                    value: "+200.00",
                },
            ],
        };
    },
    computed: {
        // 计算属性
    },
    watch: {
        // 监听函数
    },
    onLoad() {
        setTimeout(function() {
            console.log("start pulldown");
        }, 1000);
        uni.startPullDownRefresh();
        // 生命周期创建后(created)
    },
    onPullDownRefresh() {
        console.log("refresh");
        setTimeout(function() {
            uni.stopPullDownRefresh();
        }, 1000);
    },
    onReady() {
        // 挂载后(mounted)
    },
    methods: {},
};
</script>

<style lang="scss">
.page-consumption-record {
    .record {
        width: 100%;
        height: 8%;
        padding: 10rpx 30rpx;
        background: #ffffff;
        border-bottom: 1px solid #f2f2f2;
        .month {
            font-size: 34rpx;
            color: #333333;
            font-weight: normal;
            margin-bottom: 10rpx;
        }
        .money {
            font-weight: normal;
            font-size: 24rpx;
            color: #666666;
        }
    }
    .each-record {
        position: absolute;
        left: 0;
        top: 8%;
        bottom: 0;
        width: 100%;
        // height: 100%;
        padding: 10rpx 30rpx;
        background-color: #ffffff;
        .line {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 120rpx;
            .photo {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 10%;
            }
            .right-content {
                width: 90%;
                height: 100%;
                padding: 20rpx;
                border-bottom: 1px solid #f2f2f2;
                .top {
                    display: flex;
                    justify-content: space-between;
                    font-size: 30rpx;
                    color: #333333;
                    margin-bottom: 20rpx;
                }
                .times {
                    font-size: 20rpx;
                    color: #999999;
                }
            }
        }
    }
}
</style>
